<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="text"  id="content">
    <button onclick="sendMessage()">发生消息</button>
</body>
<script>
    //创建一个websocket对象，用来创建该连接，客户端收发数据
    //url格式   协议名：//ip:port/contextPath/资源路径 
    //contextPath是部署的项目名/项目路径.websocket协议名 为ws
    let ws=new WebSocket("ws://127.0.0.1:8080/chatroom/message");
    //为websocket对象绑定时间（事件发生是，有浏览器自动的调用事件函数）
    //建立连接的事件：e
    ws.onopen=function(e){
        console.log("客户端连接")
    }
    //关闭连接事件
    ws.onclose = function(e){
        let reason = e.reason;
        console.log("close: "+reason)
        if(reason){
            alert(reason)
        }
    }
    //发生错误事件
    ws.onerror=function(e){
        console.log("websocket出错")
    }
    //接收消息事件
    ws.onmessage=function(e){//服务器推送消息给客户端时，执行该函数
        console.log(e.data)
    }
    function sendMessage(){
        let content= document.querySelector("#content");
        ws.send(content.value);//使用websocket对象.send 发送对象
    }
</script>
</html>